<script setup>
import { onMounted } from "vue";
import { useRouter } from "vue-router";

const props = defineProps({
  routeName: String
})

const router = useRouter();

const menus = ref([]);

const onRoutes = computed(() => {
  return router.currentRoute.value.fullPath;
});

const getMenus = () => {
  const routes = router.getRoutes();
  const home = routes.find((x) => x.name === props.routeName);
  menus.value = home?.children || [];
};

onMounted(() => {
  getMenus();
});
</script>
<template>
  <div class="sidebar">
    <el-menu
      :default-active="onRoutes"
      class="el-menu-vertical-demo"
      router
      text-color="rgba(1,10,21,0.8)"
      active-text-color="#0064ff"
    >
      <el-menu-item-group>
        <template v-for="(item, index) in menus" :key="index">
          <template v-if="!!item.children && item.children.length">
            <el-sub-menu :index="item.path">
              <template #title>
                <span :title="item.title">{{ item.title }}</span>
              </template>
              <el-menu-item
                v-for="(threeItem, i) in item.children"
                :key="i"
                :index="threeItem.path"
                class="child_menu"
                :title="threeItem.title"
              >
                {{ threeItem.title }}
              </el-menu-item>
            </el-sub-menu>
          </template>
          <template v-else>
            <el-menu-item :index="item.path">
              <span :title="item.title">{{ item.title }}</span>
            </el-menu-item>
          </template>
        </template>
      </el-menu-item-group>
    </el-menu>
  </div>
</template>
<style scoped lang="scss">
.sidebar {
  height: calc(100% - 57px);
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 57px;

  .el-menu-vertical-demo {
    border: none;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 250px;
    min-height: 400px;
  }
}
</style>
